JavaScript  and  Ajax 

http://www.w3schools.com/js/js_examples.asp 
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JavaScript 

• In  addition  to  HTML  and  CSS... 

• Browsers  have  a powerful  programming  language  called 
JavaScript  that  runs  in  the  browser 

• Actually  not  much  like  Java  - more  like  C 

• Very  powerful  and  flexible  - we  keep  “discovering”  new 
power 

http://en.wikipedia.org/wiki/JavaScript 


Language  Syntax 

• Whitespace  does  not  matter  - spaces  and  new  lines 

• Begin  and  end  of  blocks  are  curly  braces 

• Statements  must  end  in  semicolons 


function  messageQ 
{ 

alert("This  alert  box  was  called  with  the  onload  event"); 

} 


The  Most  Useful  JavaScript 


• The  alert  box  is  often  the  way  we  debug  simple 
JavaScript 

• When  it  runs  - alert  makes  a pop  up  box 


JavaScript 

Hello  from  JavaScript 


alertf'Hello  from  JavaScript"); 


c 0K  ) 


Language  Syntax 

• Javascript  supports  comment  characters  that  start  and 
end  a comment  and  can  be  multiline  as  well  as  a 
comment  character  that  comments  to  the  end  of  the 
current  line 
function  message() 

{ 

/*  I am  a 

multi-line  comment  */ 

alert("This  alert  box  was  called  with  the  onload  event"); 
//  I am  a comment  to  the  end  of  one  line 

> 


Including  JavaScript  in  a Page 

• Include  an  File  from  a URL 

• Inline  Code 

• As  an  Attribute  on  a Tag 


Including  a File  from  a URL 


<html  xmlns="http://www.w3.org/ 1 999/xhtml"> 

<head> 

<title>App  Engine  - HTML</title> 

<link  href=7static/glike.css"  rel="stylesheet"  type="text/css"  /> 

<script  type="text/javascript"  src="/static/js/jquery- 1 .2.6.min.js"></script> 
</head> 

<body> 

<div  id="header"> 


<hmi>  Validating  Inline  Javascript 

<head>  O J T 

</head> 

<body> 

<h  1 >Here  is  my  Document</h  1 > 

We  add  Javascript 

<script  type="text/javascript"> 

comments  and  a 

/*  <![CDATA[  */ 

CDATA  tag  to  pass 

alert("Hello  from  JavaScript"); 

XHTML  and 

/*  ]]>  */ 

HMTL4  Strict 

</script> 

<h  1 >Here  is  my  second  Header</h  1 > 
</body> 

Validation 

</html> 

inline.htm 

Inline  Javascript 

<html>  J r 

<head> 

</head> 

<body> 

<h  I >Here  is  my  Document</h  I > 

<script  type="text/javascript"> 
alert("Hello  from  JavaScript"); 

</script> 

<h  I >Here  is  my  second  Header</h  I > 

</body> 

</html> 


Inline  JavaScript 
runs  as  the  page 
loads. 


inline.htm 


Here  is  my  Document 

<html> 

<head> 

</head> 

<body> 

<h  I >Here  is  my  Document</h  I > 
<script  type="text/javascript"> 
alert("Hello  from  JavaScript"); 
</script> 

<h  I >Here  is  my  second  Header</h  I > 
</body> 

</html> 


Here  is  my  Document 
Here  is  my  second  Header 


http://www.dr-chuck.com/javascript/one.htm 


Event  Handling 

• Certain  tags  have  attributes  which  contain  JavaScript 
which  run  when  things  (events)  “happen”  to  the  tag 

• http://www.w3schools.com/jsref/jsref_events.asp 

• onchange,  onclick,  onmousedown,  onmouseup  .. 

<a  href="http://www.umich.edu"  onclick="alert('Ouch!')">Plan  A</a> 


<html> 

<head> 

<script  type="text/javascript"> 
function  message() 

{ 


http://www.dr-chuck.com/javascript/three.htm 


alert("This  alert  box  was  called  with  the  onload  event"); 

} 

</script> 


</head> 


<body  onload="message()"> 
<h  I >Hello  World</h  I > 
</body> 

</html> 


Another 

Event 


http://www.w3schools.com/js/tryit.asp?filename=tryjs_headsection 


<body> 

<a  href="http://www.umich.edu"  onclick="alert('Ouch!')"> 

Plan  A</a> 

</p><p> 

<a  href="http://www.umich.edu"  onclick="alert('Yow!');return  false;"> 
Plan  B</a> 

</p> 

</body> 


Plan  B 

Returning  false  in  these 
events  means  “don’t  do 
what  you  were  going  to 
do’’.  In  this  case,  Plan  B 
will  not  follow  the  link 
afte  the  popup. 

http://www.dr-chuck.com/javascript/two.htm 


0 

( OK  ) 

<form  method="post"  action=7apply"> 

<P> 

<label  for="name">Name:</label> 

<input  type="text"  name="name"  id="name7> 

</p> 

<P> 

<label  for="account">  Account:</label> 

<input  type="text"  name="account"  id="account7> 

</p> 

<P> 

<label  for="password">  Password:</label> 

<input  type="password"  name="password"  id="password7> 

</p> 

<input  type="submit"  name="Login7> 

<input  type="button"  onclick="window.location=V,;  return  false;" 
value="Cancer  /> 

</form> 


<input  type="button"  onclick="window.location=7';  return  false;" 

Document  Object  Model 

value="Cancel"  /> 

When  this  button  is  clicked,  navigate  this 
window’s  location  to  the“/”  URL,  and  do  not 

submit  this  form. 

http://en.wikipedia.org/wiki/Document_Object_Model 

Document  Object  Model 

• JavaScript  can  manipulate  the  current  HTML  docment 

<input  type="button"  onclick="window.location=V';  return  false;" 
value="Cancel"  /> 

• The  “Document  Object  Model”  tells  us  the  syntax  to 
use  to  access  various  “bits”  of  the  current  screen  to 
read  and/or  manipulate 

• You  can  even  find  pieces  of  the  model  by  id  attribute 
and  change  them 

When  this  button  is  clicked,  go  into  the 
document  model  at  window.location  and 
change  it  to  be  “/”,  and  do  not  submit  this 
form. 

http://en.wikipedia.org/wiki/Document_Object_Model 

http://www.dr-chuck.com/javascript/four.htm 

<p> 

<a  href-'#1' 

onclick="document.getElementByld(,stuff).innerHTML  = 'BACK'^BACK^^ 

<a  href="#" 

onclick=,,document.getElementByld(,stuff).innerHTML  = ,FORTH,;">FORTH</a> 

</p> 

<P> 

Hello  <b><span  id="stuff>Stuff</span></b>  there. 

</p> 

BACK  FORTH 

Updating  the  Browser 

Hello  Stuff  there. 

Document 

BACK  FORTH  BACK  FORTH 

This  is  one  reason  why 
you  can  only  have  one  id 

Hello  BACK  there.  HcUo  FORTH  thcrc- 

per  document. 

FireBug  - JavaScript  / DOM 

• If  you  are  going  to  do  *any*  non-trivial  JavaScript  and/or  DOM 
manipulation 

• Get  FireBug  for  FireFox 

• addons.mozila.org 

• Many  Javascript  errors  are  *silent*  - FireBug  notices  the  errors 


JavaScript 

Errors 


• Generally  silently  ignored 
byt  hte  browser 

• FireFox: Tools  ->  Error 
Console 


http://www.dr-chuck.com/javascript/flve.htm 


<html> 

<body> 

<h  I >Here  is  my  Document</h  I > 
<script  type="text/javascript"> 
alort("Hello  from  JavaScript); 
</script> 

<h  I >Here  is  my  second  Header</h  I > 
</body> 

</html> 


Mozilla  Firefox 

V;  & 

© file:///Users/csev/Desktop/javascript/stuff.htrt  ▼ [Gj  ^ Google 

Sakai  dr-chuck.com  NWA  Chuck's  Medial  iPhone  Navigation  13k  CT  SI  182 » 18k 

Q Disable  * Q,  Cookies 

* J CSS  * O Forms  » * Images  » Information  » Miscellaneous  * Outline  • ^ Re: 

sia 

BACK  FORTH 

Hello  Stuff  thcrc. 

Inspect  ; window 

r<x  ® © 

Console  HTML  CSS 

Script  DOM  Net  Options  ▼ 

scrollX 

0 

scrollY 

0 

scrollMaxX 

0 

scrollMaxY 

0 

defaultStatus 

► parent 

Window  stoff.htm 

opener 

m\ 

► top 

Window  stuff.htm 

► window 

Window  stuff.htm 

► content 

Window  stuff.htm 

► self 

Window  stuff.htm 

► location 

file:///Users/csev/Desktop/javascript/stuff.htm 

► history 

[ " http : //en-us . mm . mozilla . com/en-US/f irefox/2 .0.0. 17/whGtsnew/" , 

"file: ///Users/csev/Desktop/ javascript/stuff . htm”  ] 

^ frames 

Window  stuff.htm 

► navigator 

Navigator  appCodeName=  Mozilla  appName = Netscape 

^ screen 

Screen  top=  0 left-  0 width=  1440  height*  900  pixel  Depth* 32 

► menubar 

BarProp  visiblc=  true 

► toolbar 

BarProp  visible*  true 

► locationbar 

BarProp  visible=frue 

► personalbar 

BarProp  vislble=  true 

► statusbar 

BarProp  visible*  froe 

O ^ 

JavaScript  Summary 


• There  is  a lot  of  power  in  JavaScript  - we  keep  “discovering”  new 
uses  and  capabilities  of  JavaScript 

• JavaScript  is  increasingly  being  treated  as  a very  serious  language 
- including  using  it  in  the  server  as  well  as  the  browser 

• People  now  specialize  as  JavaScript  developers 

http://www.w3schools.com/js/js_examples.asp 


Asynchronous  JavaScript  and 
XML  (Ajax) 


http://en.wikipedia.org/wi  ki/Ajax_(programming) 


JavaScript  “Compilers” 


• Some  languages  can  be  “compiled”  into  Javascript 

• Google  Web  Tool  Kit  - Java 

• Ruby  - Red 

• Pyjamas  - Python 

• Google  Chrome  - Very  Fast  Javascript 


In  The  Good  Old  Days 

• A user  would  take  some  action  like  a click  on  a link  or  button 

• The  Browser  would  make  a TCP/IP  connection  to  the  web 
server 

• The  browser  would  send  a POST  or  GET  request 

• The  Server  would  send  back  a page  to  display  to  the  user 

• Repeat  the  Request-Response  Cycle... 


Browser 

Redraw  Redraw  Redraw  Redraw 


Server 


Browser 

Redraw  Update  Update  Update 


Server 


XMLHttpRequest 

• By  1 999,  Microsoft  wanted  to  move  some  of  the  processing  of  web 
pages  from  the  web  server  to  the  web  browser 

• The  idea  was  instead  of  sending  whole  pages  of  HTML  to  the  browser, 
send  out  the  data  to  be  displayed  as  XML  and  then  produce 
presentation  in  JavaScript  in  the  browser 

• Originally  a Microsoft  innovation  - other  browsers  soon  adopted  the 
idea  and  it  became  a defacto  standard  with  a little  variation  between 
browsers  :) 

• It  soon  became  clear  that  this  could  send  *anything*  - not  just  XML 
back  and  forth  between  a browser  and  client 

http://en.wikipedia.org/wiki/XMLHttpRequest 


Ajax  Arms  Race 

• The  race  was  on  to  build  better  and  better  web  sites  that  began 
to  replace  things  like  frames  and  full-screen  updates  with 

Xml  Http  Request  operations  and  very  selective  screen  updates. 

• With  clever  JavaScript  programmers  - the  impossible  became 
possible  - drag  and  drop,  automatic  field  completion  - automatic 
data  saving.  It  made  the  web  operate  much  more  like  the 
desktop. 

• Applications  like  GMail  and  Google  Maps  - feel  very  un-web. 


Ajax  versus  Request/Response 

• Standard  Request/Response 

• Each  click  presents  a whole  new  screen 

• Ajax  - Asynchronous  JavaScript  and  XML 

• Each  action  sends  data  and  receives  results  in  the  background. 

• The  browser  typically  gets  back  a fragment  of  HTML  or  XML 
which  is  used  to  update  a portion  of  the  screen  using  the 
browser  document  model 


Ajax  Libraries 

• Prototype  - Basic  portability  and  common  functionality 

• http://www.prototypejs.org/ 

• Script.aculo.us  - Animation  and  effects 

• http://script.aculo.us/ 

• jQuery  - General  purpose  - http://jquery.com/ 

• Google  Web  Toolkit  - http://code.google.com/webtoolkit/ 


Lots  of  Flexibility 


• When  you  combine  the  ability  to  rewrite  the  Browser  document 
model  with  the  ability  to  interact  with  the  web  server  from 
JavaScript  - there  is  lots  of  potential  fun 

• Different  browsers  did  things  a *little*  differently  - this  led  to  the 
rise  of  Ajax  Libraries 


Accessibility  with  Ajax 

• It  is  not  perfect 

• Needs  further  study 

Fluid  ^KjM 

that  works  - for  everyone 

• Lots  of  investment  going  on 

About  Fluid 
News 

Get  Involved 

What  is  Fluid?  community  Resources 

..  • Fluid  Wiki:  collaborative 

Fluid  IS  a worldwide  documentation,  technical 

collaborative  project  architecture  information. 

• Fluid  Project  - Univ. Toronto 

Partners 

Technical  Information 
User  Experience 
Meetings 

to  help  improve  the  and  user  experience 

. ....  , material  for  the  Fluid 

usability  and  ProJect. 

accessibility  of 

. Fluid  Blog:  learn  more 

community  open  about  the  progress  of 

source  projects  with  Fluid  directly  from 

• http://www.fluidproject.org/ 

Google  App  Engine 
jQuery  and  Ajax 

ae- 1 2-ajax 

http://ae- 1 2-ajax.appspot.com/ 


Ajax  Enabled  Chat 


• We  will  update  the  list  of  messages  in  the  background  every  four 
seconds 

• This  way  we  will  see  messages  from  other  people  “appear”  on 
our  screen  - even  if  we  are  typing 


Topics 

• Installing  jQuery  and  adding  it  to  _base.htm 

• Create  new  HTML  fragment  of  messages  at  /messages  - do  not 
extend  _base.htm 

• Change  chat.htm  to  use  JQuery  / Javascript  and  a timer 


O O O App  Engine  - HTML 

◄ C <2-  + ' ' http: // local host:8080 /chat  © * Qr  ajax 

App  Engine  Sites  Topics  Chat  Members  Logout  (csevl 

Appengine  Chat 

( Submit ) 

Yes,  it  was  surprisingly  easy  - make  sure  to  look  at  the  key()  method  (sally)  Sat  22  Nov  2008 
Have  you  used  a Reference  yet?  (csev)  Sat  22  Nov  2008 
Hi  there  (sally)  Sat  22  Nov  2008 


We  will  put  the  chat  messages  in  a div 
and  update  the  div  using  Ajax. 


Intailing  JQuery 


• Go  to  jquery.com  - download  the  latest  version  - source  code 

• Place  it  in  your  application  under  the  static  folder 


Q ae- 12 -ajax 
Q app.yaml 
index. py 
Q static 

glike.css 
▼ Gfl  js 

jquery-1.2.6.min.js 

( i templates 

► Q util 


HTML  Fragments 


• We  need  a page  that  just  gives  us  message  content 

• No  head  material  - not  even  a body  tag 


◄ [:  C http://localhost:8080/chat  - ^0-  Google 

App  Engine  Sites  Topics  Login 

Appengine  Chat 

Yes,  it  was  surprisingly  easy  - make  sure  to  look  at  the  key()  method  (sally)  Sat  22  Nov 
2008 

Have  you  used  a Reference  yet?  (csev)  Sat  22  Nov  2008 
Hi  there  (sally)  Sat  22  Nov  2008 


http://  localhost:  8080/  messages 

■*  | C (5  + 0http://localhost:8O8O/messages  - Q.- 

Yes,  it  was  surprisingly  easy  - make  sure  to  look  at  the  keyO  method  (sally)  Sat  22  Nov  2008 
Have  you  used  a Reference  yet?  (csev)  Sat  22  Nov  2008 
Hi  there  (sally)  Sat  22  Nov  2008 


Installing  jQuery 


• To  use  the  jQuery  library  in  your  HTML,  you  need  to  include  it 

• Typically  this  is  done  in  _base.htm  in  the  <head>  area 


<head> 

<title>App  Engine  - HTML</title> 

< I i n k href="/static/glike.css"  rel="stylesheet"  type= "text/css"  /> 

<script  type="text/javascript"  src=7static/js/jquery- 1 .2.6.min.js"></script> 
</head> 


def  main(): 

application  = webapp.WSGIApplication([ 

('/login',  LoginHandler), 

('/logout',  LogoutHandler), 

('/apply',  ApplyHandler), 

('/members',  MembersHandler), 

('/chat',  ChatHandler), 

('/messages',  MessagesHandler), 

('/.*',  MainHandler)], 

debug=True) 

wsgiref.handlers.CGIHandler().run(application) 

New  Routing  Entry 


class  MessagesHandler(webapp.RequestHandler): 
def  get(self): 

que  = db.Query(ChatMessage).order("-created"); 
chat list  = que.fetch(limit=  10) 

doRender(self,  'messagelisthtm',  {'chat list':  chat list}) 


Retrieve  the  recent  the  ChatMessage  messages  and 
put  them  in  the  context  for  out  new  messages.htm 
template. 


templates\messages.htm 

{%  for  chat  in  chat_list  %} 

<p>{{  chattext }}  ({{chat.user.acct}}) 

{{chat.created|date:"D  d MY"}}</p> 

{%  endfor  %} 

http://localhost:  8080/ messages 

◄ | C ■&  + O http://localhost:8080/messages  * 

Yes,  it  was  surprisingly  easy  - make  sure  to  look  at  the  kcyO  method  (sally)  Sat  22  Nov  2008 
Have  you  used  a Reference  yet?  (esev)  Sat  22  Nov  2008 
Hi  there  (sally)  Sat  22  Nov  2008 


templates\messagelist.htm 


{%  for  chat  in  chatjist  %} 

<p>{{  chat.text }}  ({{chat.user.acct}}) 
{{chat.created|date:"D  d MY"}}</p> 
{%  endfor  %} 


Do  not  extend  _base.htm  - we  do  not  want 
the  headers.  Loop  through  the  messages  in 
the  context  and  print  out  each  message 
enclosed  in  a paragraph  tag. 


{%  extends  "_base.htm"  %} 

{%  block  bodycontent  %} 

<h  I >Appengine  Chat</h  I > 

<form  method="post"  action=7chat"> 
<P> 

<input  type="text"  name-'message" 
size="607> 

<input  type="submit"  name="Chat7> 

</p> 

</form> 

{%  ifnotequal  error  None  %} 

<P> 

{{  error  }} 

</p> 

{%  endifnotequal  %} 


chatscreen.htm 


<div  id="chatcontent"> 
Loading... 

</div> 

<script>  /*  <![CDATA[  */ 
function  updateMsg()  { 

$.ajax({ 

url:  7messages", 
cache:  false, 
success:  function(frag){ 
$("#chatcontent").html(frag); 

} 

}); 

setTimeout('updateMsg()',  4000); 

} 

updateMsg(); 

/*  ]]>  */ 

</script> 

{%  endblock  %} 


<div  id="chatcontent"> 
Loading... 

</div> 

<script>  /*  <![CDATA[  */ 
function  update Msg()  { 

$.ajax({ 

url:  "/messages", 
cache:  false, 
success:  function(frag){ 

$ ("#c  h atco  n te  n t") . h tm  I (frag) ; 

} 

}); 

setTimeout('updateMsg()',  4000); 

} 

updateMsg(); 

/*  ]]>  */  </script> 

{%  endblock  %} 


The  chatcontent  div  is  where  we  will 
put  the  messages  which  we  retrieve 
from  the  /messages  url. 


The  $ajax()  call  is  from  jQuery.  It 
retrieves  a URL  and  then  looks  up  a 
named  div  and  replaces  its  html 
content. 


Then  we  request  that  this  be  done 
every  4 seconds. 


class  ChatHandler(webapp.RequestHandler): 
def  get(self): 

que  = db.Query(ChatMessage).order('-created'); 
chatjist  = que.fetch(limit=  10) 
doRender( 
self, 

'chatscreen.htm', 

{ 'chatjist':  chatjist }) 

The  chatscreen.htm  no  longer  needs  the  list  of 
messages  since  they  comes  out  in  “/messages”. 


INFO  2008-11-23  04:00:52,996  index. py]  messages.htm 

INFO  2008-11-23  04:00:53,016  dev_appserver.py]  "GET  /messages?_«1227412852966  HTTP/1. 1”  200  - 

INFO  2008-11-23  04:00:56,997  index. py]  messages.htm 

INFO  2008-11-23  04:00:57,016  dev.appserver.py]  "GET  /messages?_=1227412856968  HTTP/1.1"  200  - 

INFO  2008-11-23  04:01:00,997  index. py]  messages.htm 

INFO  2008-11-23  04:01:01,013  dev.appserver . py]  "GET  /messages?_-1227412860970  HTTP/1.1"  200  - 

INFO  2008-11-23  04:01:05,003  index. py]  messages.htm 

INFO  2008-11-23  04:01:05,021  dev.appserver . py]  "GET  /messages?_=1227412864972  HTTP/1.1"  200  - 

INFO  2008-11-23  04:01:09,005  index. py]  messages.htm 

INFO  2008-11-23  04:01:09,028  dev.appserver.py]  "GET  /messages?_=1227412868976  HTTP/1. 1"  200  - 


You  can  watch  the  log  as  the  Ajax  requests 
come  in  every  4 seconds. 

The  timestamp  changes  to  make  sure  that  the 
pages  are  not  cached. 


class  ChatHandler(webapp.RequestHandler): 
def  get(self): 

que  = db.Query(ChatMessage).order('-created'); 
chatjist  = que.fetch(limit=IO) 
doRender( 
self, 

'chatscreen.htm') 


The  chatscreen.htm  no  longer  needs  the  list  of 
messages  since  they  comes  out  in  “/messages”. 


Ajax  Summary 


• This  is  one  of  hundreds  of  Ajax  techniques  supported 
by  JQuery 

• It  is  a very  common  and  useful  pattern 

• http://www.jquery.com/  - much  more  detail 


